import React from 'react'
import { UserOutlined, EditOutlined } from '@ant-design/icons';
import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload, Form, Select, Input, TreeSelect, Radio, } from 'antd';
import { Avatar } from 'antd';
import { Drawer } from 'antd';
import { useState } from 'react';
import { useEffect } from 'react';
const { Option } = Select;
const { TextArea } = Input;
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 20,
    },
};

const Profile = () => {
    const [headImg, setHeadImg] = useState('')
    const [head, setHead] = useState('')
    const [user, setUser] = useState({})
    useEffect(() => {
        setHeadImg(JSON.parse(localStorage.user).avatar)
        setUser(JSON.parse(localStorage.user))
    }, [])
    const props = {
        name: 'file',
        action: 'http://xawn.f3322.net:8012/user/avatar',
        method: 'PUT',
        body: {
            username: JSON.parse(localStorage.user).username,
            avatar: head
        },
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            "Authentication": localStorage.getItem('token')
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
                setHead(info.file.name)
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log(values);
    };
    const onReset = () => {
        form.resetFields();
    };
    const onFill = () => {
        form.setFieldsValue({
            note: 'Hello world!',
            gender: 'male',
        });
    };
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        form.setFieldsValue({
            email: user.email,
            mobile: user.mobile,
            deptId: String(user.deptId),
            // deptName:user.deptId
            ssex: user.ssex

        })
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    return (
        <div style={{ width: '100%', height: '400px', border: '1px solid #bbb' }}>
            <div style={{ width: '100%', height: '60px', display: 'flex', justifyContent: "flex-end", borderBottom: '1px solid #bbb' }}>
                <p style={{ color: '#1890ff', fontSize: '18px', marginRight: '20px', lineHeight: '60px' }} onClick={showDrawer}>编辑资料</p>
            </div>
            <div style={{ width: '100%', height: '340px', display: 'flex' }}>
                <div style={{ width: '240px', height: '100%' }}>
                    <div style={{ width: '240px', height: '220px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        <Avatar shape="square" size={64} src={`http://xawn.f3322.net:8002/distremote/static/avatar/${headImg}`} icon={<UserOutlined />} style={{ width: 160, height: 160 }} />
                    </div>
                    <div style={{ width: '240px', height: '200px', display: 'flex', justifyContent: 'center' }}>

                        <Upload {...props}>
                            <Button icon={<EditOutlined />}>修改头像</Button>
                        </Upload>
                    </div>
                </div>
                <div style={{ width: '600px', height: '280px', margin: '30px', fontSize: '15px' }}>
                    <p>账户：{JSON.parse(localStorage.user).username}</p>
                    <p>角色：{JSON.parse(localStorage.user).roleName}</p>
                    <p>性别：{JSON.parse(localStorage.user).ssex}</p>
                    <p>电话：{JSON.parse(localStorage.user).mobile}</p>
                    <p>邮箱：{JSON.parse(localStorage.user).email}</p>
                    <p>部门：{JSON.parse(localStorage.user).deptName}</p>
                    <p>描述：Let.s Fuck go</p>
                </div>
            </div>
            <>

                <Drawer title="编辑资料" placement="right" onClose={onClose} open={open}
                    width={500}
                    footer={
                        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                            <Form.Item {...tailLayout}>
                                <Button htmlType="button" onClick={onReset} style={{ marginLeft: '140px', marginRight: '10px' }}>
                                    取消
                                </Button>
                                <Button type="primary" htmlType="submit" >
                                    提交
                                </Button>
                            </Form.Item>
                        </Form>

                    } >
                    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                        <Form.Item
                            name="email"
                            label="邮箱"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="mobile"
                            label="手机"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item label="部门" name='deptId'>
                            <TreeSelect
                                treeData={[
                                    {
                                        title: '开发部',
                                        value: '1',
                                        children: [
                                            {
                                                title: '开发一部',
                                                value: '2',
                                            },
                                            {
                                                title: '开发二部',
                                                value: '3',
                                            },
                                        ],
                                    },
                                    {
                                        title: '市场部',
                                        value: '4',
                                    },
                                    {
                                        title: '人事部',
                                        value: '5',
                                    },
                                    {
                                        title: '测试部',
                                        value: '6',
                                    },
                                ]}
                            />
                        </Form.Item>

                        <Form.Item label="性别" name='ssex'
                            rules={[
                                {
                                    required: true,
                                    message: '请选择性别！',
                                },
                            ]}>
                            <Radio.Group>
                                <Radio value="0"> 男 </Radio>
                                <Radio value="1"> 女 </Radio>
                                <Radio value="2"> 保密 </Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="描述" name=''>
                            <TextArea rows={4} />
                        </Form.Item>
                    </Form>
                </Drawer>
            </>
        </div>
    )
}

export default Profile